<!DOCTYPE html>
<html lang="zh" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户 - 物联网调试管理系统</title>
    <script th:src="@{/statics/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/statics/tabler/tabler.min.js}"></script>
    <link rel="stylesheet" th:href="@{/statics/tabler/tabler.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/statics/bootstrap/table/bootstrap-table.min.css}">
    <script th:src="@{/statics/bootstrap/table/bootstrap-table.min.js}"></script>
    <script th:src="@{/statics/bootstrap/table/bootstrap-table-zh-CN.min.js}"></script>
    <link rel="stylesheet" th:href="@{/statics/system/common.css}">
    <script th:src="@{/statics/layer/layer.js}"></script>
    <script th:src="@{/statics/system/common.js}"></script>
</head>
<body>
<div class="page">
    <div th:replace="common/header :: header"></div>

    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <!-- Page pre-title -->
                        <div class="page-pretitle">
                            物联网调试管理后台
                        </div>
                        <h2 class="page-title">
                            客户管理
                        </h2>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="btn-list">
                            <button onclick="addCustomer()" class="btn btn-primary d-none d-sm-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
                                新建客户
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="alert alert-info" role="alert">
                    <div class="text-muted">客户功能仅用于对调试页面进行筛选，无其他实际功能。</div>
                </div>
                <div class="row row-deck row-cards">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive" style="height: 560px">
                                    <table class="table table-vcenter" id="customer_table"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //菜单class追加属性
    $(function () {
        $("#menu_customers").addClass("active");
    });

    //模拟数据
    let data = [];
    for (let i = 0; i < 10; i++) {
        let item = {
            id:'id',
            name:'customers'+i,
            pages:10
        }
        data.push(item);
    }

    //渲染数据
    $('#customer_table').bootstrapTable({
        url: '/customer/list',                      //请求后台的URL（*）
        method: 'GET',
        pagination: true,
        sidePagination: "server",
        queryParams: function (params) {
            return {
                pageNum: params.offset + 1,
                pageSize: params.limit,
            }
        },
        responseHandler: function (res) {
            return {
                "rows": res.data.rows,
                "total": res.data.total
            }
        },
        columns: [{
            field: 'id',
            title: 'ID',
            align: 'center',
            valign: 'middle',
            width: 50
        },{
            field: 'name',
            title: '客户名称',
            align: 'center',
            valign: 'middle',
            width: 100
        },{
            field: 'operate',
            title: '操作',
            align: 'center',
            valign: 'middle',
            width: 100,
            formatter: function (value, row, index) {
                return '<button onclick="editCustomer('+ row.id +')" class="btn btn-primary btn-sm">编辑</button> ' +
                        '<button onclick="deleteCustomer('+ row.id +')" class="btn btn-danger btn-sm">删除</button>';
            }
        }]
    });

    function addCustomer() {
        layer.prompt({title: '请输入客户名称', formType: 0}, function(pass, index){
            if (pass === '' || pass === null || pass === undefined) {
                layer.msg('客户名称不能为空');
                return;
            }
            $.ajax({
                url: '/customer/add',
                type: 'POST',
                contentType:'application/json;charset=UTF-8',
                data: JSON.stringify({
                    name: pass
                }),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('添加成功');
                        $('#customer_table').bootstrapTable('refresh');
                        layer.close(index)
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (res) {
                    layer.msg('添加失败:' + res.msg);
                }
            })
        });
    }

    function editCustomer(row) {
        layer.prompt({title: '请输入新的客户名称', formType: 0}, function(pass, index){
            $.ajax({
                url: '/customer/update',
                type: 'POST',
                contentType:'application/json;charset=UTF-8',
                data: JSON.stringify({
                    id: row,
                    name: pass
                }),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('修改成功');
                        $('#customer_table').bootstrapTable('refresh');
                        layer.close(index)
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (res) {
                    layer.msg('修改失败:' + res.msg);
                }
            })
        });
    }

    function deleteCustomer(row) {
        layer.confirm('确定删除 客户ID：' + row + ' ？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: '/customer/delete/'+row,
                type: 'POST',
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('删除成功');
                        $('#customer_table').bootstrapTable('refresh');
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (res) {
                    layer.msg('删除失败:' + res.msg);
                }
            })
        }, function(){
            layer.closeAll();
        });
    }
</script>
<style>
    .fixed-table-container {
        height: 500px;
        border: 1px solid #ddd;
    }
</style>
</html>
